<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                template="/WEB-INF/facelets/template.xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:f="http://java.sun.com/jsf/core" >
    
    <ui:param name="paramTitle" value="Pay" />
    <ui:param name="paramHeader" value="Pay" />
    <ui:define name="content">
        <p:panel id="payOuterDiv">
            <h:outputLabel styleClass="viewOrderLbl" value="Your order"/>
            <p:dataList styleClass="payDataList" var="movie" value="#{payControllerBean.payBean.movieList}" itemType="none">
                <h:outputText value="#{movie.title}" />
                <br/><h:outputText styleClass="qtyLbl" value="#{payBackingBean.getCount(movie)} qty #{movie.price} kr" />
                <h:outputText styleClass="payOutPutTextRight" value="#{payBackingBean.getTotalCost(movie)} kr" /><br/>
                <p:spacer height="0.1" />
            </p:dataList>
            <p:separator styleClass="paySeparator"/><br/>
            <h:outputText value="Shipping cost" />
            <h:outputText styleClass="payOutPutTextRight" value="#{payBackingBean.shippingCost} kr" /><br/>
            <p:separator styleClass="paySeparator"/>
            <h:outputText value="Total cost" />
            <h:outputText styleClass="payOutPutTextRight" value="#{payBackingBean.totCostIncShipping} kr" />
        </p:panel>
        <h:form>
            <h:commandButton styleClass="buyBtn" value="Confirm"
                             actionListener="#{payControllerBean.confirmPurchase}" action="#{payControllerBean.navigateToConfirmation()}"/>
        </h:form>
    </ui:define>
</ui:composition>